<template>
  <div>
    <div class="rightIcons">
      <i @click="addTab()" class="header-icon el-icon-circle-plus-outline"></i>
      <i @click="removeTab()" class="header-icon el-icon-delete"></i>
    </div>
    <el-tabs v-model="editableTabsValue" style="padding:0;">
      <el-tab-pane
        v-for="(item, index) in seriesSettingConfig"
        :key="'tab' + index"
        :label="item.name"
        :name="'tab' + index"
        v-if="item.name"
      >
      <!-- {{item.lineStyle}}
      {{item.lineStyle.color}} -->

        <seriesSettingContent :config="item" :formList="formList" />
      </el-tab-pane>
    </el-tabs>
  </div>

</template>

<script>
import seriesSettingContent from './seriesSettingContent'

	export default {
		props: {
			seriesSettingConfig: Array,
      formList: Array
		},
    computed: {
		},
		components: {
      seriesSettingContent
		},
		data() {
      return {
        editableTabsValue: '1',
        tabIndex: 0
      }
    },

    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
      addTab() {
        // let name = '系列' + (this.editableTabs.length+1)
        // this.editableTabs.push({
        //   name: name
        // });
        // this.editableTabsValue = name;
        alert("add")
      },
      removeTab(){
        alert("removeTab")
      }
    },
    created() {
		},
		mounted() {
      // 初始化默认第一个
      this.editableTabsValue =  'tab0'
      
		},
	}
</script>
<style lang="scss" scoped>
.rightIcons{
  position: absolute;
  height: 48px;
  line-height: 48px;
  right: 25px;
  top: 0;
  i{
    padding-right: 6px;
    cursor: pointer;
  }
}
</style>